<template>
  <el-form
      ref="formRef"
      :model="value"
      :rules="rules"
      label-width="100px"
      size="mini"
  >
    <div>
      <el-row>
        <el-col :span="24" :md="12">
          <el-form-item label="股票名" prop="stock_name">
            <el-autocomplete
              v-model="value.stock_name"
              :fetch-suggestions="stockNameInput"
              :debounce="300"
              :trigger-on-focus="false"
              placeholder="请输入股票名"
              @select="stockSelect"
              style="width: 60%;"
            >
            <template v-slot="{ item }">
              <div>{{ item.stock_name_raw }}</div>
              <div style="font-size: 12px; color: #bbb; margin-top: -5px; line-height: 1.2;">
                {{ item.market }} - {{ item.code }}
              </div>
            </template>
            </el-autocomplete>
         </el-form-item>
         <el-form-item label="股票代码" prop="code">
           <el-input v-model="value.code" placeholder="请输入股票代码" clearable style="width: 60%;"/>
         </el-form-item>
        </el-col>
        <el-col :span="24" :md="12">
          <el-form-item label="市场" prop="market">
            <el-select
              v-model="value.market"
              placeholder="请选择市场"
              clearable
              filterable
              style="width: 60%;"
            >
              <el-option
                v-for="item in marketList"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="实时价格">
            <el-tag v-if="value.nominal_price">{{ value.nominal_price }}</el-tag>
            <span v-else style="color: #bbb;">无价格</span>
          </el-form-item>
         </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script>
import {searchCodeByName, getNominalPrice} from '@/api/stockpool'

export default {
  name: 'StockBasicForm',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      marketList: this.hashmap.marketList,
      rules: {
        stock_name: [{required: true, trigger: 'blur', message: '请输入股票名'}],
        market: [{required: true, trigger: 'change', message: '请选择市场'}]
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal?.code) {
          this.getNominalPrice(newVal.code)
        }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    validate(cb) {
      this.$refs.formRef.validate(cb)
    },
    stockNameInput(query, cb) {
      if (!query) return cb([])
      searchCodeByName({stock_name: query}).then(res => {
        const list = res?.data?.list || []
        const suggestions = list.map(item => ({
          value: `${item.stock_name} (${item.market})`,
          stock_name_raw: item.stock_name,
          code: item.code,
          market: item.market
        }))
        cb(suggestions)
      }).catch(() => cb([]))
    },
    stockSelect(item) {
      if (!item || !item.code) return
      this.value.stock_name = item.stock_name_raw
      this.value.code = item.code
      this.value.market = item.market
      this.getNominalPrice(item.code)
    },
    getNominalPrice(code) {
      getNominalPrice({code}).then(res => {
        this.value.nominal_price = res?.data?.nominal_price ?? '暂无'
        this.$forceUpdate()
      })
    }
  }
}
</script>
